// /pages/device-detail/device-detail.js

// 导入全局 App 实例
const app = getApp();
// 从我们创建的时间工具文件中，导入所需的函数
import { isToday, generateFutureDates, generateTimeSlots, padZero } from '../../utils/time.js';

Page({
  /**
   * 页面的初始数据
   */
  data: {
    deviceId: null,       // 设备ID
    deviceInfo: {},       // 设备详细信息
    dates: [],            // 顶部日期选择器的数据
    selectedDate: '',     // 当前选中的日期 'YYYY-MM-DD'
    timeSlots: [],        // 当前日期的所有时间段
    selectedSlots: [],    // 用户已选择的时间段索引数组
    summaryText: '',      // 底部栏显示的汇总文本
    isLoading: true,      // 控制页面初始加载状态，可用于骨架屏
  },

  /**
   * 生命周期函数 -- 监听页面加载
   */
  onLoad(options) {
    // 存储从上个页面传来的设备ID
    this.setData({ deviceId: options.id });
    // 启动页面初始化流程
    this.initializePage();
  },

  /**
   * [核心流程] - 页面初始化函数
   */
  async initializePage() {
    this.setData({ isLoading: true });
    
    // 1. 使用工具函数生成未来7天的日期
    const dates = generateFutureDates(7);
    this.setData({ dates });
    
    // 2. 默认选中“今天”
    const today = dates[0].fullDate;
    this.setData({ selectedDate: today });

    // 3. 使用 Promise.all 并发执行两个网络请求，提升加载速度
    try {
      await Promise.all([
        this.fetchDeviceDetails(),         // 获取设备基本信息
        this.fetchReservationsForDate(today) // 获取今天的预约情况
      ]);
    } catch (err) {
      console.error("页面初始化失败", err);
    } finally {
      this.setData({ isLoading: false });
    }
  },

  /**
   * [网络流程] - 获取设备详细信息
   */
  async fetchDeviceDetails() {
    const info = await app.request({
      url: `/api/app/devices/${this.data.deviceId}`
    });
    this.setData({ deviceInfo: info });
  },
  
/**
   * [网络流程] - 根据指定日期，获取当天的预约记录
   */
  async fetchReservationsForDate(dateStr) {
    wx.showLoading({ title: '加载中...' });
    try {
      const reservations = await app.request({
        // 【修改】更新为新的、更符合RESTful风格的 API 路径
        url: `/api/app/devices/${this.data.deviceId}/reservations`,
        data: { reservation_date: dateStr }
      });
      // 获取成功后，调用数据处理函数
      this.processTimeSlots(reservations);
    } catch (err) {
      console.error(`获取日期 ${dateStr} 的预约信息失败`, err);
    } finally {
      wx.hideLoading();
    }
  },

  /**
   * [数据处理] - 整合后端预约数据与前端时间段，生成最终UI状态
   */
  processTimeSlots(reservations) {
    // 1. 从工具函数生成一天中所有基础的时间段
    let slots = generateTimeSlots();
    const timeToMinutes = timeStr => (timeStr === "00:00" ? 24 * 60 : parseInt(timeStr.substr(0, 2)) * 60 + parseInt(timeStr.substr(3, 2)));

    // 2. 标记已被预约的时间段
    reservations.forEach(res => {
      const resStartMinutes = timeToMinutes(res.start_time.substring(11, 16));
      const resEndMinutes = timeToMinutes(res.end_time.substring(11, 16));
      slots.forEach(slot => {
        const slotStartMinutes = timeToMinutes(slot.startTime);
        const slotEndMinutes = timeToMinutes(slot.endTime === "00:00" ? "24:00" : slot.endTime);
        if (slotStartMinutes < resEndMinutes && slotEndMinutes > resStartMinutes) {
          slot.status = 'booked';
        }
      });
    });

    // 3. (仅对今天) 标记已过去的时间段，并过滤掉可选的过期时段
    let finalSlots = slots;
    if (isToday(this.data.selectedDate)) {
      const now = new Date();
      finalSlots = slots.filter(slot => {
        if (slot.status === 'booked') return true; // 已被预约的时段总是显示
        const slotEndTimeStr = `${this.data.selectedDate.replace(/-/g, '/')} ${slot.label.split(' - ')[1]}`;
        const slotEndTime = new Date(slotEndTimeStr.replace("24:00", "23:59:59"));
        return slotEndTime > now; // 只保留未过期的可选时段
      });
    }
    
    // 4. 更新页面数据
    this.setData({ timeSlots: finalSlots });
  },

  /**
   * [事件处理] - 用户点击顶部的日期
   */
  async onDateTap(e) {
    const newDate = e.currentTarget.dataset.date;
    if (newDate === this.data.selectedDate) return;

    // 重置状态并获取新日期的数据
    this.setData({
      selectedDate: newDate,
      selectedSlots: [],
      summaryText: '',
    });
    await this.fetchReservationsForDate(newDate);
  },

  /**
   * [事件处理] - 用户点击时间段格子
   */
  onTimeSlotTap(e) {
    const { index, status } = e.currentTarget.dataset;
    // 如果格子是已预约或已过期，则不响应点击
    if (status === 'booked' || status === 'expired') return;

    let { selectedSlots } = this.data;
    const isSelected = selectedSlots.includes(index);

    if (isSelected) {
      // 如果点击的是已选中的格子，则取消选择
      selectedSlots = selectedSlots.filter(i => i !== index);
    } else {
      // 检查是否为连续选择
      if (selectedSlots.length > 0) {
        const min = Math.min(...selectedSlots);
        const max = Math.max(...selectedSlots);
        if (index !== min - 1 && index !== max + 1) {
          // 如果不连续，则清空之前的选择，只选中当前点击的这一个
          wx.showToast({ title: '请选择连续时段', icon: 'none' });
          selectedSlots = [index];
        } else {
          selectedSlots.push(index);
        }
      } else {
        // 如果之前没有选择，则直接添加
        selectedSlots.push(index);
      }
    }
    
    // 更新数据并调用UI刷新方法
    this.setData({ selectedSlots });
    this.updateUI();
  },
  
  /**
   * [UI更新] - 根据当前的选择，刷新时间格子的状态和底部汇总文本
   */
  updateUI() {
    let { timeSlots, selectedSlots, selectedDate } = this.data;
    // 1. 更新所有格子的status
    timeSlots.forEach((slot, i) => {
      if (slot.status !== 'booked') { // 仅更新非'booked'的格子
        slot.status = selectedSlots.includes(i) ? 'selected' : 'available';
      }
    });

    // 2. 更新底部汇总文本
    let summaryText = '';
    if (selectedSlots.length > 0) {
      selectedSlots.sort((a, b) => a - b); // 确保索引是排序的
      const startDate = new Date(selectedDate.replace(/-/g, '/'));
      const month = startDate.getMonth() + 1;
      const day = startDate.getDate();
      const startTime = timeSlots[selectedSlots[0]].label.split(' - ')[0];
      const endTime = timeSlots[selectedSlots[selectedSlots.length - 1]].label.split(' - ')[1];
      summaryText = `${month}月${day}日 ${startTime} - ${endTime}`;
    }

    this.setData({ timeSlots, summaryText });
  },

  /**
   * [事件处理] - 用户点击“提交预约”按钮
   */
  async onSubmit() {
    // 使用登录守卫确保用户已登录
    const isLoggedIn = await app.ensureLoggedIn();
    if (!isLoggedIn) return;

    // 检查是否已选择时间段
    if (this.data.selectedSlots.length === 0) {
      wx.showToast({ title: '请选择预约时段', icon: 'none' });
      return;
    }
    
    const { selectedSlots, timeSlots, selectedDate, deviceId } = this.data;
    selectedSlots.sort((a, b) => a - b); // 排序以找到开始和结束
    
    // 计算开始时间
    const startDateTime = `${selectedDate} ${timeSlots[selectedSlots[0]].startTime}`;
    
    // 计算结束时间（处理跨天情况）
    const lastSlot = timeSlots[selectedSlots[selectedSlots.length - 1]];
    let endDate = new Date(selectedDate.replace(/-/g, '/'));
    if (lastSlot.endTime === "00:00") {
      endDate.setDate(endDate.getDate() + 1); // 如果结束时间是 "00:00"，日期加一天
    }
    const endDateStr = `${endDate.getFullYear()}-${padZero(endDate.getMonth() + 1)}-${padZero(endDate.getDate())}`;
    const endDateTime = `${endDateStr} ${lastSlot.endTime}`;

    // 跳转到预约表单页，并携带所有必要参数
    wx.navigateTo({
      url: `/pages/booking-form/booking-form?deviceId=${deviceId}&start=${startDateTime}&end=${endDateTime}`,
    });
  },
});